<template>
	<div :style="`background:${state}`" class="h-40">{{ state }}</div>
	<el-button size="large" @click="click" type="primary" class="mt-5"
		>click</el-button
	>
</template>

<script setup name="测试xstate状态机" lang="ts">
import { createMachine, interpret } from 'xstate';

const states = {
	green: { on: { CHANGE: 'yellow' } },
	yellow: { on: { CHANGE: 'red' } },
	red: { on: { CHANGE: 'green' } },
};

const state = ref<any>('yellow');
const stateMachine = createMachine({
	id: 'change',
	initial: state.value,
	states,
	predictableActionArguments: true,
});
const changeService = interpret(stateMachine)
	.onTransition((newState) => {
		state.value = newState.value;
	})
	.start();
const click = () => changeService.send('CHANGE');
</script>
